<template>
    <!-- vue3组件中的模板结构可以没有根标签 -->
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <button @click="test">测试demo中hello事件</button>
    <slot></slot>
    <slot name="qe"></slot>
    <slot name="as"></slot>
</template>
  
<script lang="js">
import { reactive } from 'vue';
export default {
    name: 'App',
    props:['msg','school'],
    emits:['hello'],
    setup(props,context) {
        // console.log('------setup------',props);
        // console.log(context);
        // console.log('------setup------',context.attrs); //相当于vue2中的$attrs
        // console.log('------setup------',context.emit); //触发自定义事件
        // console.log('------setup------',context.slots); //收到插槽内容
        //数据
        let person = reactive({
            name: "张三",
            age: 18,
        })
        function test(){
            context.emit('hello',666)
        }
        // 返回一个对象
        return {
            person,
            test
        }
    },
}
</script>
  
<style></style>
  